<template>
	<view class="rescue-list-wrap">
		<navBar title="我的救援" :showHome="false" :showBack="true" marginLeft="50px"/>
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="tabs">
				<u-tabs :list="tabsList" :scrollable="true" :current="current" lineColor="#CF1A1B" lineWidth="55"
					lineHeight="4" :activeStyle="{
					color: '#CF1A1B',
					'font-size':'14px'
				}" :inactiveStyle="{
					color: 'rgba(0,0,0,0.65)',
					'font-size':'14px'
				}" itemStyle="height: 44px;" @change="handleTab">
				</u-tabs>
			</view>
			<view class="order-list">

				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="pullData"
					@refresherrefresh="refreshData" refresher-enabled="true" :refresher-triggered="triggered"
					refresher-background="#CF1A1B">
					<view v-if="listData.length == 0" class="empty">
						<image src="@/static/empty.png"></image>
						<text>无数据</text>
					</view>
					<view class="order-item" v-for="item in listData" @click="lookDetail(item)"  :key="item.id">
						<view class="order-header">
							<view class="order-time">{{ item.createdTime }}</view>
							<view class="order-status" v-if="item.state==1">待派单</view>
							<view class="order-status" v-if="item.state==2">待救援</view>
							<view class="order-status" v-if="item.state==3">救援中</view>
							<view class="order-status" v-if="item.state==4">待付款</view>
							<view class="order-status" v-if="item.state==5">已完成</view>
							<view class="order-status" v-if="item.state==6">已取消</view>
						</view>
						<view class="order-content">
							<view class="order-sevice-pro">
								<image :src="item.rescueProjectIcon">
									{{item.rescueProjectName}}
							</view>
							<view class="adress-info">
								<view class="order-adress-start">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/jy_bg.png">
									</image>
									<view class="ad">
										{{ item.rescueAddress }}
									</view>
								</view>
								<view class="order-adress-line" v-if="item.endAddress"></view>
								<view class="order-adress-end" v-if="item.endAddress">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/zd_bg.png">
									</image>
									<view class="ad">
										{{ item.endAddress }}
									</view>
								</view>
							</view>

						</view>
						<view class="store-info" v-if="item.terminalName">
							<image class="img" src="../../static/img/tabbar/ic_store.png"></image>
							<view class="name">{{ item.terminalName }}</view>
							<image @tap.stop="callPhone(item.terminalPhone)"
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/lxfs.png">
							</image>
							<view class="dh" @tap.stop="callPhone(item.terminalPhone)">联系</view>
						</view>
						<view class="order-btn" v-if="item.state == 1||item.state == 4||item.state == 5">
							<view class="btn">
								<u-button type="primary" text="取消订单" color="#CF1A1B" shape="circle"
									v-if="item.state == 1" @tap.stop="openCancelOrderPop(item)"></u-button>
								<u-button type="primary" text="去支付" color="#CF1A1B" shape="circle" :loading="payLoading"
									v-if="item.state == 4"></u-button>
								<u-button type="primary" text="去评价" color="#CF1A1B" shape="circle"
									v-if="item.state == 5&&(!item.score&&!item.evaluate)"></u-button>
								<u-button type="primary" text="查看评价" color="#CF1A1B" shape="circle"
									v-if="item.state == 5&&(item.score||item.evaluate)"></u-button>
							</view>

						</view>
					</view>
					<view class="load-more" v-if="listData.length != 0">
						<u-loadmore :status="loadingStatus" :font-size="28" :icon-size="28" />
					</view>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="cancelPop" @close="cancelPop=false" mode="bottom">
			<view class="cancel-pop">
				<view class="cancel-list">
					<u-radio-group v-model="driverReason" placement="column">
						<view class="item" v-for="item in reasonList" :key="item.code" @click="reasonHandle(item.code)">
							<view>{{item.name}}</view>
							<u-radio :name="item.code" label=" " size="30" activeColor="red" iconSize="25"
								shape="circle"></u-radio>
						</view>
					</u-radio-group>

				</view>
				<view class="pop-btn">
					<u-button type="primary" text="关闭" color="#CF1A1B" shape="circle" @click="cancelPop=false"
						plain></u-button>
					<u-button type="primary" text="确定" color="#CF1A1B" shape="circle" @click="cancelOrder"></u-button>
				</view>

			</view>
		</u-popup>
		<u-popup :show="ratePop" @close="ratePop=false" mode="bottom">
			<view class="rate-pop">
				<view class="rate-source">
					<u-rate :count="5" v-model="score" size="45"></u-rate>
					<text v-if="score == 1">非常不好</text>
					<text v-if="score == 2">不好</text>
					<text v-if="score == 3">一般</text>
					<text v-if="score == 4">好</text>
					<text v-if="score == 5">非常好</text>
				</view>
				<view class="rate-tare">
					<u--textarea height="120" v-model="evaluate" placeholder="亲，快来评价下本次服务体验吧，可以从服务态度等方面描述哦~" count
						maxlength="100"></u--textarea>
				</view>
				<view class="pop-btn">
					<u-button type="primary" text="关闭" color="#CF1A1B" shape="circle" @click="ratePop=false"
						plain></u-button>
					<u-button type="primary" text="确定" color="#CF1A1B" shape="circle" @click="rateOrder"></u-button>
				</view>

			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import payment from '@/mixins/payment.js'
	export default {
		name: 'rescueList',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
			...mapGetters('user', ['getUserInfo']),
		},
		mixins: [payment],
		data() {
			return {
				info: '',
				current: '',
				status: '',
				tabsList: [{
						name: '全部',
						status: ''
					}, {
						name: '待派单',
						status: 1,
					}, {
						name: '待救援',
						status: 2
					},
					{
						name: '救援中',
						status: 3
					},
					{
						name: '待付款',
						status: 4
					},
					{
						name: '已完成',
						status: 5
					},
					{
						name: '已取消',
						status: 6
					}
				],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				triggered: true,
				listData: [],
				loadingStatus: 'loadmore',
				currentOrder: {},
				cancelPop: false,
				driverReason: '',
				reasonList: [],
				ratePop: false,
				score: 5,
				evaluate: '',
				payLoading:false,
				fromPage:0
			}
		},
		methods: {
			//页面回退
			// backHome(){
			// 	if(this.fromPage){
					
			// 	}
			// },
			//切换原因
			reasonHandle(val){
				this.driverReason = val
			},
			// 初始化页面
			async initData() {
				if (this.loadingStatus == 'nomore') {
					return false
				}
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/getRoadRescueList',
						data: {
							pageNum: this.pageNum,
							pageSize: this.pageSize,
							state: this.status,
							userId: this.getUserInfo.id
						}
					})

					this.listData = this.listData.concat(res.datas.data)
					this.total = res.datas.count
					res.datas.data.length < this.pageSize ? (this.loadingStatus = 'nomore') : (this.loadingStatus =
						'loadmore');
					this.triggered = false
				} catch (e) {
					this.triggered = false

				}


			},
			
			//获取取消原因
			async getReason() {
				try {
					const res = await this.$request({
						url: '/user-center/ter-terminal/get-dict-by-code',
						data: {
							code: 'driver_reason',
							pageNum: 1,
							pageSize: 100
						}
					})
					this.reasonList = res.datas
				} catch (e) {

				}
			},
			//立即支付
			async buyNow(val) {
				this.payLoading = true
				uni.showLoading({
					title: '网络请求中'
				})
				try {
					// 提交订单
					const {
						datas
					} = await this.$request({
						url: '/order-center/road/rescue/roadRescuePayment',
						data: {
							id: val.id,
							actualPayment: val.actualPayment,
						}
					})
					this.payLoading = false
					uni.hideLoading()
					// // 跳转拉卡拉支付
					this.toPay(datas.counterUrl)
				} catch (err) {
					this.payLoading = false
					uni.hideLoading()
					this.$refs.uToast.show({
						message: err.respMsg || '创建订单失败',
						position: 'top'
					})
				}
			},
			//电话
			callPhone(val) {
				// 区分设备
				if (uni.getSystemInfoSync().osName === 'ios') {
					uni.makePhoneCall({
						phoneNumber: val
					})
				} else {
					uni.showModal({
						title: "拨打电话",
						content: val,
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: val
								})
							}
						}
					})
				}
			},
			//切换列表
			handleTab(val) {
				this.pageNum = 1
				this.status = val.status
				this.current = val.index
				this.listData = []
				this.loadingStatus = 'loadmore'
				this.initData()
			},
			// 滚动刷新
			pullData() {
				if (this.total == this.listData.length) {
					this.loadingStatus = 'nomore'
					this.triggered = false
					return false
				}
				this.pageNum++
				this.loadingStatus = 'loading';
				this.initData()
			},
			//下拉刷新
			refreshData() {
				this.listData = []
				this.triggered = true
				this.loadingStatus = 'loadmore'
				this.pageNum = 1
				this.initData()
			},
			//打开取消原因弹窗
			openCancelOrderPop(val) {
				this.currentOrder = val
				this.cancelPop = true

			},
			//打开评价弹窗
			openRatePop(val) {
				this.currentOrder = val
				this.ratePop = true
			},
			//取消订单
			async cancelOrder() {
				if (!this.driverReason) {
					this.$refs.uToast.show({
						type: 'default',
						message: '请选择取消原因！'
					})
					return false
				}
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/cancellationRoadRescue',
						data: {
							driverReason: this.driverReason,
							id: this.currentOrder.id,
							type: 1,
							userId: this.getUserInfo.id
						}
					})
					this.$refs.uToast.show({
						type: 'default',
						message: '已取消该订单！'
					})
					this.cancelPop = false
					this.listData = []
					this.loadingStatus = 'loadmore'
					this.initData()

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
				}
			},
			//评价订单
			async rateOrder() {
				try {
					const res = await this.$request({
						url: '/order-center/road/rescue/roadRescueEvaluate',
						data: {
							id: this.currentOrder.id,
							score: this.score,
							evaluate: this.evaluate,
							userId: this.getUserInfo.id,
						}
					})
					this.$refs.uToast.show({
						type: 'default',
						message: '感谢您的评价！'
					})
					this.ratePop = false
					this.listData = []
					this.loadingStatus = 'loadmore'
					this.initData()

				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.respMsg
					})
				}
			},
			//查看详情
			lookDetail(val){
				uni.navigateTo({
					url: `/rescuePack/rescueDetail/index?id=${val.id}&type=1`,
				})
			}

		},
		onShow() {

		},
		onLoad(option) {
			this.fromPage = option.type
			this.initData()
			this.getReason()
		}
	}
</script>

<style scoped lang="scss">
	.rescue-list-wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;

		/deep/ .u-tabs__wrapper__nav__line {
			margin-left: 15px;
			font-size: 14px;
		}

		.empty {
			width: 100%;
			height: 80%;
			position: absolute;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 220px;
				height: 180px;
			}

			text {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.45);
				line-height: 30rpx;
			}
		}

		.cancel-pop {
			padding: 20rpx 24rpx;

			.cancel-list {
				.item {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 26rpx;
					align-items: center;
					border-bottom: 2rpx solid #eee;
				}
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				/deep/ .u-button {
					width: 45% !important;
				}
			}
		}

		.rate-pop {
			padding: 20rpx 24rpx;

			.rate-source {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 24rpx;
			}

			.pop-btn {
				display: flex;
				justify-content: space-between;
				margin-top: 40rpx;

				/deep/ .u-button {
					width: 45% !important;
				}
			}
		}
	}

	.content-box {
		height: calc(100% - 148rpx);

		.order-list {
			height: calc(100% - 88rpx);

			.order-item {
				padding: 20rpx 32rpx;
				margin: 20rpx;
				width: calc(100% - 104rpx);
				background: #fff;
				border-radius: 5rpx;

				.order-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #eee;

					.order-time {
						color: #040812;
					}

					.order-status {
						color: #51AAFE;
					}
				}

				.order-content {

					.order-sevice-pro {
						padding: 20rpx 28rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						image {
							width: 44rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}
					}

					.adress-info {
						padding: 20rpx 24rpx;
						background: #FAFAFA;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 8rpx;
						}

						.order-adress-line {
							width: 0;
							border: 2rpx solid #eee;
							margin-left: 20rpx;
							margin-top: 8rpx;
							margin-bottom: 8rpx;
							height: 32rpx;
						}

						.order-adress-start {
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}

						.order-adress-end {
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}

						.ad {
							width: calc(100% - 40rpx);
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}

				}

				.store-info {
					background: #FAFAFA;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 20rpx 24rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}

					.name {
						margin-right: 12rpx;
					}

					.dh {
						color: #CF1A1B;
					}
				}

				.order-btn {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding-top: 20rpx;

					.btn {
						width: 150rpx;
						height: 64rpx;
					}

					/deep/ .u-button {
						height: 64rpx !important;
					}
				}
			}
		}
	}
</style>